<template>
  <div class="home">    
    <!-- <Header></Header> -->
    <Carousel></Carousel>
    <Card></Card>
    <div class="h">
      <div class="c1">
        <p class="ctitle" id="flower">
          鲜花信息<span
            style="
              position: relative;
              left: 1100px;
              font-size: 15px;
              font-weight: normal;
              cursor: pointer;
            "
          >
            <router-link :to="{name:'flower'}">查看详情></router-link></span
          >
        </p>
        <div class="c1all">
          <div class="c1_left">
            <img
              src="../../assets/left.png"
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="c1_right">
            <div class="cardgroup">
              <div
                class="card"
                v-for="(item, index) in flowerList.slice(0, 4)"
                :key="index"
              >
                <img
                  :src="require(`../../assets/${item.img}`)"
                  alt=""
                  class="imglist"
                  @click="gotobuy(item)"
                />
                <p>{{ item.fname }}</p>
                <p style="color: red">￥{{ item.sprice }}</p>
                <p style="font-size: 10px; color:grey">
                  {{ item.fdesc }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c2">
        <p class="ctitle">
          鲜花资讯<span
            style="
              position: relative;
              left: 1100px;
              font-size: 15px;
              font-weight: normal;
              cursor: pointer;
            "
          >
            <router-link :to="{name:'infomation'}">查看详情></router-link></span
          >
        </p>
         <div class="zx" id="zx1">
          <div class="zxleft"><img src="../../assets/img1.jpg" alt=""></div>
          <div class="zxright">
             <p style="margin-bottom:10px;font-size:20px;font-weight:550;color:rgb(240,65,85); font-family: '楷体';cursor:pointer;">黄玫瑰和香槟玫瑰一样吗？两者有何不同？</p>
        <p style="margin-bottom:40px;color:#737373;font-size:10px;">在很多人眼里，黄玫瑰和香槟玫瑰长得一样一样的，但是细细观察一下，不同之处还挺多的，黄玫瑰和香槟玫瑰一样吗？两者有何不同？</p>
        <p> <span><router-link :to="{name:'txt1'}">查看详情></router-link></span></p>
          </div>
        </div>
       
        <el-divider></el-divider>
         <div class="zx" id="zx1">
          <div class="zxleft"><img src="../../assets/img2.jpg" alt=""></div>
          <div class="zxright">
             <p style="margin-bottom:10px;font-size:20px;font-weight:550;color:rgb(240,65,85); font-family: '楷体';cursor:pointer;">送花要注意什么？如何给老人，爱人，朋友送花？</p>
        <p style="margin-bottom:40px;color:#737373;font-size:10px;">看到这个标题你可能会纳闷，送花谁不会，还需要你来教？你有可能真的不会哦，送花的讲究可多着呢，送花要注意什么？如何给老人，爱人，朋友送花？</p>
        <p> <span><router-link :to="{name:'txt2'}">查看详情></router-link></span></p>
          </div>
        </div>
       
        <el-divider></el-divider>
         <div class="zx" id="zx1">
          <div class="zxleft"><img src="../../assets/img3.jpg" alt=""></div>
          <div class="zxright">
             <p style="margin-bottom:10px;font-size:20px;font-weight:550;color:rgb(240,65,85); font-family: '楷体';cursor:pointer;">什么节日要送花，应该送什么花？</p>
        <p style="margin-bottom:40px;color:#737373;font-size:10px;">在生活中，节日里送花成为了一件日常常见的社交方式，不同的节日有着不同的送花习俗。不同节日里送花有着不同的含义。</p>
        <p> <span><router-link :to="{name:'txt3'}">查看详情></router-link></span></p>
          </div>
        </div>
       
        <el-divider></el-divider>
         <div class="zx" id="zx1">
          <div class="zxleft"><img src="../../assets/img4.jpg" alt=""></div>
          <div class="zxright">
             <p style="margin-bottom:10px;font-size:20px;font-weight:550;color:rgb(240,65,85); font-family: '楷体';cursor:pointer;">各国送花禁忌</p>
        <p style="margin-bottom:40px;color:#737373;font-size:10px;">因为文化的不同，各国人在对于鲜花花语的理解上也不同，他们有着各自的送花禁忌。在特殊场合，送错了花是一件很失礼，不尊重别人的事情。到底有什么送花禁忌呢？</p>
        <p> <span ><router-link :to="{name:'txt4'}">查看详情></router-link></span></p>
          </div>
        </div>
       
        <el-divider></el-divider>
   
      </div>
    </div>

<Footer></Footer>
   
  </div>
</template>

<script>
// import Header from '../front/header.vue'
import Carousel from "../../components/Carousel.vue";
import Card from '../../components/card.vue'
import Footer from '../../components/footer.vue'
export default {
  components: { Carousel,Card,Footer},
  props: {},
  data() {
    return {
      flowerList:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
    load(){
      this.request.get("/flower").then((res) => {
      this.flowerList = res.data.data;
      
    });
    // this.request.get("/flower/page",{
      
    //   params: {
    //   pageNum:this.pageNum,
    //   pageSize:this.pageSize,
    //   fname:this.name,
    //   obj:this.objName
    //   }
    // }).then((res) =>{
    //   console.log(res)
    //   console.log(res.data.data)
    //   this.flowerList = res.data.data.records;
    //   this.total = res.data.data.total
    // })
    },
    gotobuy(item) {
       // 进入结算页面之前把选中的数据存到state里
       // this.$store.state.select =item;
      //  console.log(item)
      //  console.log(this.$store.state.select )
      this.$store.commit('update',item)
      this.$router.push('/flowerDetail')
     
    },
  },
  created() {
    this.$emit("call-father");
    this.load()
  },
  mounted() {
  },
};
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
.home {
  .h {
    width: 80%;
    margin: 0 130px;
    .title{
  font-size: 22px;
}
.more {
  float: right;
}
.c1 {
  .ctitle {
  font-size: 25px;
  font-weight: bold;
  margin: 20px 0px;
}
  .c1all {
    display: flex;
    .c1_left {
  height: 520px;
  width: 250px;
  background-color: aqua;
  margin-top: 20px;
}
.c1_right {
  height: 520px;
  width: 900px;
  /* background-color: beige; */
  margin-left:90px;
  .cardgroup {
    // display: flex;
   div {
  float: left;
}
  .card {
   
  width: 200px;
  height: 220px;
  margin: 25px;
  cursor: pointer;
  img {
  width: 200px;
  height: 200px;
}
// .card p {
//   width: 200px;
//   display: block;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   text-align: center;
// }
}

}

}
  }

}
.c2{
  margin: 30px 0px;
  width: 1200px;
  .el-divider {
    margin: 30px 0px;
  }
  .ctitle {
  font-size: 25px;
  font-weight: bold;
  margin: 20px 0px;
}
.zx {
  display: flex;
  position: relative;
  .zxleft {
  width: 15vw;
  height: 150px;
  // margin-right: 30px;
}
.zxright {
display: flex;
flex-direction: column;
margin-left: 30px;
span{
  display: inline-block;
  position: absolute;
  left: 93%;
  
  // top:10px;
} 
}
 img {
  width: 100%;
  height: 100%;
}
}
}
  }
}

</style>